<template>
  <div class="acount">
    <div class="header flex js-sp">
      <div class="left-num text-left">
        <div class="mb-10">{{ $t("stock.stockSecondAccountValue") }}:</div>
        <div class="text-14 textf-din">
          <span class="textperson-t2 text-bolder">
            {{
              $currency(
                decimalDigitsInputFilter(data?.stock_second_lever_btc_number, 4)
              )
            }}
            BTC
          </span>
          <span class="textperson-t2">
            /{{
              $currency(
                decimalDigitsInputFilter(
                  data?.stock_second_lever_usdt_number,
                  4
                )
              )
            }}USD
          </span>
        </div>
      </div>
      <div class="left-num text-left"></div>
      <div class="input-center cust-input">
        <el-input
          v-model="state.currency"
          @change="find"
          :placeholder="$t('tips.currencyTip')"
        >
          <template #prefix>
            <img
              style="margin-top:10px;margin-inline-start:5px"
              src="@/assets/images/search.png"
              class="search-icon"
              alt
            />
          </template>
        </el-input>
      </div>
      <div class="right flex js-sp align-center">
        <el-switch
          v-model="state.ishidden"
          active-color="#E54B4B"
          @change="hidden"
          inactive-color="#EAECEF"
        ></el-switch>
        <span class="text-14 persontext-t2 point">
          {{ $t("assets.hideSmallAssets") }}
        </span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('assets.hidden')"
          placement="top"
        >
          <i class="el-icon-warning-outline text-16"></i>
        </el-tooltip>
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        :data="state.tableData"
        header-cell-class-name="eltablebg"
        style="width: 100%"
      >
        <el-table-column
          prop="currency_name"
          :sortable="true"
          :label="$t('assets.currency')"
        ></el-table-column>
        <!-- <el-table-column prop :label="$t('assets.lumpSum')" :sortable="true">
          <template #default="r">
            <span>{{
              $currency(accAdd(r.row.stock_balance, r.row.stock_lock_balance))
            }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="second_lever_balance"
          :sortable="true"
          :label="$t('assets.availableBalance')"
        >
          <template #default="r">{{
            $currency(r.row.second_lever_balance)
          }}</template>
        </el-table-column>
        <el-table-column
          :sortable="true"
          prop="second_lever_lock_balance"
          :label="$t('exchange.profitAndLoss')"
        >
          <template #default="r">{{
            $currency(r.row.second_lever_lock_balance)
          }}</template>
        </el-table-column>
        <!-- <el-table-column
          :sortable="true"
          prop="btc_number"
          width="170"
          :label="$t('assets.BTC_valuation')"
        >
          <template #default="r">
            {{ $currency(dolt(r.row.btc_number)) }}
          </template>
        </el-table-column> -->
        <el-table-column prop :label="$t('assets.operate')" width="270">
          <template #default="r">
            <!-- <span
              class="personlink mr-16 point"
              v-if="r.row.currency_recharge_status"
              @click="recharge(r.row.currency_id)"
              >{{ $t("assets.recharge") }}</span
            >
            <span
              class="personlink mr-16 point"
              @click="cash(r.row.currency_id)"
              v-if="r.row.currency_withdraw_status"
              >{{ $t("assets.withdrawMoney") }}</span
            > -->
            <!-- <span class="personlink mr-16 point" @click="goexchange()">
              {{ $t("assets.toTrade") }}
            </span> -->
            <span
              class="personlink point"
              @click="assetsAccount(r.row.currency_id)"
              >{{ $t("assets.billingDetails") }}</span
            >
          </template>
        </el-table-column>
        <template #empty>
          <Norecord />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { useRouter } from "vue-router";
import { decimalDigitsInputFilter, transferToNumber } from "@/utils/common";
import { accAdd } from "@/utils/calculation";

export default {
  name: "Bibiacount",
  props: { data: Object },
  emits: ["assetsAccount"],
  components: { Norecord },
  setup(props, { emit }) {
    const state = reactive({
      currency: "",
      ishidden: false,
      dialogVisible: false,
      tableData: [],
      account: [],
    });
    // console.log("s", props.data);
    /**
     * methods
     */
    const $router = useRouter();
    onMounted(() => {
      if (props.data) {
        state.tableData = props.data.wallet_stock_second_lever_list;
      }
    });
    // 隐藏小额资产
    const hidden = (val) => {
      if (val) {
        state.tableData = props.data.wallet_stock_second_lever_list.filter(
          (item) => {
            return item.btc_number > 0.001;
          }
        );
      } else {
        state.tableData = props.data.wallet_stock_second_lever_list;
      }
    };
    // 账单明细
    const assetsAccount = (id) => {
      emit("assetsAccount", id);
    };
    // 查询币种
    const find = (val) => {
      state.tableData = props.data.wallet_stock_second_lever_list.filter(
        (item) => {
          return item.currency_name.includes(val);
        }
      );
    };
    // 点击充值
    const recharge = (id) => {
      $router.push("/person/recharge?id=" + id);
    };
    // 点击提现
    const cash = (id) => {
      $router.push("/person/cash?id=" + id);
    };
    // 点击去交易
    const goexchange = () => {
      $router.push("/wealthstock");
    };
    const dolt = (val) => {
      return transferToNumber(val);
    };
    return {
      state,
      hidden,
      find,
      assetsAccount,
      recharge,
      cash,
      goexchange,
      decimalDigitsInputFilter,
      accAdd,
      dolt,
    };
  },
};
</script>

<style lang="less" scoped>
.acount {
  width: 100%;
}
.header {
  padding: 20px 30px;
  box-sizing: border-box;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mr-16 {
  margin-inline-end: 16px;
}
.textf-din {
  font-family: DINPro;
}
.up {
  min-width: 58px;
  padding: 0 5px;
  height: 22px;
  line-height: 20px;
  margin-inline-start: 17px;
}
.right {
  min-width: 157px;
}
.table {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

// 账单明细
.detail {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.single {
  width: 100%;
  padding: 0 0 20px;
  box-sizing: border-box;
}
.single-line {
  li {
    width: 33%;
  }
}
.cust-input/deep/ .el-input--prefix .el-input__inner {
  padding-inline-start: 40px;
  box-sizing: border-box;
}
</style>
